<template>
    <div class="bookcity">
        <!-- 头部 -->
        <div class="bookcity-header">
            <div class="bookcity-nav">
                <img class="nav-header" :src="textimg" alt="" @click="getDiscovery()">
                <div class="header-btn">
                    <div class="btn" :class="{'active': sex == 0}" @click="toggleSex(0)">男生</div>
                    <div class="btn" :class="{'active': sex == 1}" @click="toggleSex(1)">女生</div>
                </div>
                <van-icon name="search" class="nav-search" />
            </div>
            <van-tabs v-model="NavActiveName" color="#00acf5" title-active-color="#00acf5" lazy-render fixed>
                <van-tab title="精选" name="selected"></van-tab>
                <van-tab title="分类" name="classify"></van-tab>
                <van-tab title="榜单" name="rank"></van-tab>
                <van-tab title="书单" name="booklist"></van-tab>
            </van-tabs>
        </div>
        <!-- 精选内容 -->
        <div class="bookcity-content">
            <!-- 书城轮播 -->
            <div class="bookcity-swiper">
                <van-swipe class="my-swipe" indicator-color="white">
                    <van-swipe-item v-for="(item,index) in bannerImg" :key="index">
                        <div class="img-box">
                            <img :src="item.url" alt="error">
                        </div>
                    </van-swipe-item>
                </van-swipe>
            </div>
            <!-- 书城推荐栏目 -->
            <div v-for="(item,index) in discoverylist" :key="index" class="bookcity-bookcolumn">
                <div class="bookcolumn-title">
                    <span class="bookicon-shuben- icon"></span>{{item.categoryName}}
                </div>
                <div v-for="bookitem in item.bookList" :key="bookitem.bookId" @click="goDetail(bookitem.bookId)">
                    <Bookitem :data="bookitem" />
                </div>
            </div>
        </div>


    </div>
</template>
<script>
    import '../assets/scss/Bookcity.scss';
    import Bookitem from "../components/Bookitem.vue";

    export default {
        name: "Bookcity",
        components: {
            Bookitem
        },
        data() {
            return {
                // 0 boy 1 girl
                sex: 0,
                textimg: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1564413714,408230106&fm=26&gp=0.jpg',
                NavActiveName: 'selected',
                bannerImg: [{
                        url: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3942751454,1089199356&fm=26&gp=0.jpg'
                    },
                    {
                        url: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2066921907,4152256799&fm=26&gp=0.jpg'
                    },
                    {
                        url: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1768849685,2438371469&fm=26&gp=0.jpg'
                    },
                    {
                        url: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2358529214,1743975748&fm=26&gp=0.jpg'
                    },
                ],
                fakedata: {
                    "author": "唐家三少",
                    "bookId": 48772,
                    "categoryName": "玄幻小说",
                    "chapterStatus": "SERIALIZE",
                    "coverImg": "/file/group1/book/2fcef4e6-8a20-4ec7-bddf-b0a55c0bacb7.jpg",
                    "desc": " 一万年后，冰化了。斗罗联邦科考队在极北之地科考时发现了一个有着金银双色花纹的蛋，用仪器探察之后，发现里面居然有生命体征，赶忙将其带回研究所进行孵化。蛋孵化出来了，可孵出来的却是一个婴儿，和人类一模一样的婴儿，一个蛋生的孩子。 ",
                    "title": "斗罗大陆4终极斗罗（斗罗大陆IV终极斗罗）",
                    "word": "972万字"
                }
            }
        },
        created() {
            this.$store.dispatch('getlocaltionbooks')
        },
        methods: {

            // 切换性别
            toggleSex(flg) {
                this.sex = flg;
            },
            // 获取榜单信息
            getRankInfo() {
                this.$store.commit('updatedRanker')
            },
            // 
            getDiscovery() {
                this.$toast.loading("垃圾接口获取数据中....");
                // /app/open/api/category/discovery
                this.$store.commit('updatedDiscovery');

            },
            // 跳转到商品详情页面
            //查看商品详情页面
            goDetail(bookid) {
                console.log('goggo');
                this.$router.push({
                    name: 'Detail',
                    params: {
                        bookid
                    }
                });
            },
        },
        computed: {
            RankInfoBoy() {
                return this.$store.state.RankerBoy
            },
            RankInfoGirl() {
                return this.$store.state.RankerGirl
            },
            discoverylist() {
                return this.$store.state.discoverylist
            }
        },

    }
</script>